<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript异步编程</title>
    <script src="./js09_async_promise.js" async></script>
    <link rel="stylesheet" href="../style/common.css">
</head>
<body>
    <h1>Promise——JavaScript现代异步编程基础</h1>
    <p class="msg"></p>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            let msg = document.querySelector(".msg");

            //使用Promise对象
            myPromise.then(
                (res)=>{
                    msg.innerHTML+=`${res.msg}:${res.value}<br>`;
                },
                (err)=>{
                    msg.innerHTML+=`${err.msg}:${err.value}<br>`;
                    //classList添加、删除、修改、替换等属性
                    //此处的“danger”是comment.css里面的样式  其中的颜色为红色
                    msg.classList.add("danger");
                }
                );

                //promise链式访问：then()返回的是Promise对象
                myPromise.then(res=>{
                    msg.innerHTML += `${res.msg}:${res.value}<br>`;
                    return res;
                }).then(res =>{
                    console.log(`Promise链式调用：${res.msg}`);
                    return 10;
                }).then(data =>{
                    console.log(`Promise链式调用：${data}`);
                }).catch(err =>{
                    msg.innerHTML+=`${err.msg}:${err.value}<br>`;
                    msg.classList.add("danger");
                });
        });
    </script>
</body>
</html>